<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript">
  	window.onload = function(){
		var but = document.getElementById('but');
		var top = document.getElementById('top');
		var zero = document.getElementById('zero');
		var input = document.getElementById('input');
		var table = document.getElementById('table');
		var record = document.getElementById('record');
		
		var timer = input.value;
		var def = ['00','00','00','000'];
		input.value = def.join(':');
		var arrr = [];
		var h = 1;
		var g = 0;
		var l = 0;
		var p = 1;
		var j = 1;
		zero.onclick = function(){
			window.location.reload();
		}
		but.onclick = function(){
			this.disabled = true;
			record.disabled = false;
			timer2 = setInterval(function(){
				if(h<10){
					def.splice(2,1,'0'+h++);
				} else {
					def.splice(2,1,h++);
				}
				if(h==60){
					h-=60;
					def.splice(1,1,g++);
					if(g<10){
					def.splice(1,1,'0'+g);
				}
					if(g==60){
						g-=60;
						def.splice(0,1,l++);
					}
				}
				input.value = def.join(':');
				record.onclick = function(){
					this.disabled = false;
					if (p<10){
						var arr = def.join(':');
						arrr.splice(0,1,'记录'+ p++ +'.　' +arr);
						for (var inp=0;inp<arrr.length;inp++){
						var row = table.insertRow(-1);
						var cell = row.insertCell(-1);
						var wb = document.createElement('div');
						wb.className = 't';
						wb.innerHTML = arrr[inp];
						cell.appendChild(wb);
					}
				}
					
				}
			},1000);
			timer = setInterval(function(){
				if(j==999){
					j-=999;
				}
				if(j<10){
					def.splice(3,1,'00'+j++);
				}
				if(j<100){
					def.splice(3,1,'0'+j++);
				} else {
					def.splice(3,1,j++);
				}
				
				input.value = def.join(':');
			},1);
			/*
			timer = setInterval(function(){
				def.splice(2,1,h++);
				input.value = def.join(':');
			},1000);
			timer = setInterval(function(){
				def.splice(1,1,g++);
				input.value = def.join(':');
			},60000);
			timer = setInterval(function(){
				def.splice(0,1,l++);
				input.value = def.join(':');
			},600000);
			console.log(j);
			
			if(h==60){
				h-=60;
			}
			if(g==60){
				g-=60;
			}
			*/
			/*
			function kai(timer){
				if(timer>0){
					document.getElementById('input').innerHTML = timer;
					t++;
				}
			}
			*/
			//var timer = setTimeout("alert('哦哦')",2000);
		}
		top.onclick = function(){
			but.disabled = false;
			record.disabled = true;
			clearInterval(timer);
			clearInterval(timer2);
		}
	}
  </script>
 </head>
  <style type="text/css">
  	.div{width:400px; border:double; margin:200px auto;}
	.rec{width:auto; height:350px;}
	.t{font-size:30px;}
	#but{width:397px; height:40px; margin:1px;}
	#top{width:126px; height:40px; margin:1px;}
	#record{width:127px; height:40px; margin:1px;}
	#zero{width:125px; height:40px; margin:1px;}
	#input{width:395px; height:50px; margin:1px; font-size:40px; text-align:center;}
	#input2{width:395px; height:50px; margin:1px; font-size:30px; text-align:center;}
  </style>
 <body>
 	<div class="div">
 		<button id="but">开始</button>
		<button id="record">记录</button>
  		<button id="top">暂停</button>
		<button id="zero">清零</button>
		<input id="input" />
		<div class="rec">
			<table id="table"></table>
		</div>
  	</div>
  
 </body>
</html>
